<script setup lang="ts">
import Demo from '@/components/grid/Demo.vue';
import AutoFit from "@/components/grid/AutoFit.vue";
import Fraction from "@/components/grid/Fraction.vue";
import MinMax from "@/components/grid/MinMax.vue";
import Auto from "@/components/grid/Auto.vue";
import TemplateColumn from "@/components/grid/TemplateColumn.vue";
import GridGap from "@/components/grid/GridGap.vue";
import TemplateArea from "@/components/grid/TemplateArea.vue";
import AutoFlow from "@/components/grid/AutoFlow.vue";
import {ref} from "vue";
import JustifyAlignItems from "@/components/grid/JustifyAlignItems.vue";
import JustifyAlignContent from "@/components/grid/JustifyAlignContent.vue";
import AutoColum from "@/components/grid/AutoColum.vue";

const justifyItems = ref('stretch');
const alignItems = ref('stretch');

const justifyContent = ref('stretch');
const alignContent = ref('stretch');

</script>

<template>
  <h3>grid</h3>
  <p>https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html</p>
  <p>https://www.ruanyifeng.com/blog/2019/11/css-position.html</p>
  <p>容器属性</p>
  <el-card header="容器属性" class="mb-4">
    <ul>
      <li><code>display: grid</code>: 定义grid布局</li>
      <li><code>grid-template-columns</code>: 定义列的数量和宽度</li>
      <li><code>grid-template-rows</code>: 定义行的数量和宽度</li>
    </ul>
    <h5 class="mb-4">单位</h5>
    <ul>
      <li><code>fr</code>: 1份</li>
      <li><code>%</code>: 百分比</li>
      <li><code>px</code>: 像素</li>
    </ul>
    <p><code>repeat()</code>函数</p>
    <ul>
      <li><code>repeat(n, 50px)</code>: 重复n个 <code>50px</code></li>
      <li><code>50px 50px 50px</code> 等价于 <code>repeat(3, 50px)</code></li>
    </ul>
    <h5><code>auto-fill</code>关键字</h5>
    <p>有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 <code>auto-fill</code>
      关键字表示自动填充。</p>
    <pre v-highlight><code class="css">.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}</code></pre>
    <h5 class="mb-4"><code>auto-fit</code></h5>
    <p>除了 <code>auto-fill</code>，还有一个关键字<code>auto-fit</code>，两者的行为基本是相同的。只有当容器足够宽，可以在一行容纳所有单元格，并且单元格宽度不固定的时候，才会有行为差异：<code>auto-fill</code>会用空格子填满剩余宽度，<code>auto-fit</code>则会尽量扩大单元格的宽度
    </p>

    <auto-fit/>

    <h5 class="mb-4"><code>fr </code>关键字</h5>
    <p><code>fraction</code> 关键字表示1份，<code>1fr</code>表示1份，<code>2fr</code>表示2份，以此类推。</p>
    <fraction/>
    <br>

    <pre v-highlight><code>.container{
  display: grid;
  grid-template-columns: repeat(2, 1fr 2fr);
}</code></pre>

    <h5 class="mb-4"><code>minmax()</code>函数</h5>
    <p><code>minmax()</code>函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值</p>
    <min-max/>
    <br>
    <h5 class="mb-4"><code>auto</code>关键字</h5>
    <p><code>auto</code>关键字表示由浏览器自己决定单元格的大小。</p>
    <auto/>
    <br>

    <h5 class="mb-4">网格线的名称</h5>
    <code>grid-template-columns</code> 属性和 <code>grid-template-rows</code> 属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
    <pre v-highlight><code class="css">.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}</code></pre>
    <p>网格布局允许同一根线有多个名字，比如 <code>[fifth-line row-5]</code>。</p>
  </el-card>
  <pre v-highlight><code class="css">div {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}</code></pre>

  <h5 class="mb-4"><code>gap</code> 属性: <code>grid-row-gap</code> <code>grid-column-gap</code> <code>grid-gap</code>
  </h5>
  <p><code>grid-row-gap</code>属性设置行与行的间隔（行间距），<code>grid-column-gap</code>属性设置列与列的间隔（列间距）。</p>
  <pre v-highlight><code>container {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}</code></pre>

  <grid-gap class="mb-4"/>
  <p><code>grid-gap</code> 属性是 <code>grid-column-gap</code> 和 <code>grid-row-gap</code> 的合并简写形式，语法如下。</p>
  <code>grid-gap: &lt;grid-row-gap&gt; &lt;grid-column-gap&gt;</code>
  <p>因此，上面一段 CSS 代码等同于下面的代码。</p>
  <pre v-highlight><code>.container {
display: grid;
grid-gap: 20px 20px;
}</code></pre>
  <p>如果<code>grid-gap</code>省略了第二个值，浏览器认为第二个值等于第一个值。</p>

  <p>根据最新标准，上面三个属性名的 <code>grid-</code> 前缀已经删除，<code>grid-column-gap</code> 和
    <code>grid-row-gap</code> 写成 <code>column-gap</code> 和 <code>row-gap</code> ，<code>grid-gap</code> 写成
    <code>gap</code> 。</p>

  <h5 class="mb-4"><code>grid-template-areas</code>属性 </h5>
  <p>网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。<code>grid-template-areas</code>属性用于定义区域。</p>
  <pre v-highlight><code class="css">.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}</code></pre>
  <template-area class="mb-4"/>
  <pre v-highlight><code class="css">grid-template-areas:{
    "header header header"
    "main main sidebar"
    "footer footer footer";
}</code></pre>
  <p>如果某些区域不需要利用，则使用"点"（.）表示。</p>
  <pre v-highlight><code>grid-template-areas:
'a . c'
'd . f'
'g . i';</code></pre>
  <p>上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。</p>

  <p>注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为 <code>区域名-start</code> ，终止网格线自动命名为
    <code>区域名-end</code> 。

    比如， <code>区域名为header</code> ，则起始位置的水平网格线和垂直网格线叫做 <code>header-start</code>
    ，终止位置的水平网格线和垂直网格线叫做 <code>header-end</code> 。</p>

  <h5 class="mb-4"><code>grid-auto-flow</code>属性</h5>
  <p>
    划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。</p>
  <template-area class="mb-4"/>
  <p>这个顺序由<code>grid-auto-flow</code>属性决定，默认值是 <code> row</code> ，即"先行后列"。也可以将它设成column，变成"先列后行"。
  </p>

  <p><code>grid-auto-flow</code>属性除了设置成 <code> row</code> 和 <code> column</code>，还可以设成 <code>row
    dense</code>和 <code>column dense</code>。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。</p>

  <p><code>grid-auto-flow: row</code></p>
  <auto-flow flow="row" class="mb-4"/>
  <p><code>grid-auto-flow: row dense</code></p>
  <auto-flow class="mb-4" flow="row dense"/>
  <pre v-highlight><code class="css">.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-auto-flow: row
}
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: #ef342a;
}
.item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: #f68f26;
}</code></pre>

  <auto-flow class="mb-4" flow="column dense"/>


  <h5>
    <code>justify-items</code> 属性，
    <code>align-items</code>属性，
    <code>place-items</code>属性
  </h5>
  <p><code>justify-items</code>属性设置单元格内容的水平位置（左中右），<code>align-items</code>属性设置单元格内容的垂直位置（上中下）。
  </p>
  <pre v-highlight><code class="css">.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}</code></pre>
  <p>这两个属性的写法完全相同，都可以取下面这些值。</p>
  <ul>
    <li><code>start</code>：内容在单元格的开头。</li>
    <li><code>end</code>：内容在单元格的末尾。</li>
    <li><code>center</code>：内容在单元格的中间。</li>
    <li><code>stretch</code>：内容在单元格的填满。</li>
  </ul>
  <pre v-highlight><code class="css">.container {
  justify-items: start;
}</code></pre>
  <p><code>place-items</code>属性是 <code>justify-items</code> 和 <code>align-items</code> 的合并简写形式。</p>
  <p><code>justify-items:center</code> <code>align-items:start</code></p>

  <div style="display: grid;grid-template-columns: repeat(2, 100px 200px);gap: 10px;">
    <p>justify-items:</p>
    <el-select v-model="justifyItems" class="mb-4">
      <el-option label="start" value="start"></el-option>
      <el-option label="end" value="end"></el-option>
      <el-option label="center" value="center"></el-option>
      <el-option label="stretch" value="stretch"></el-option>
    </el-select>

    <p>align-items:</p>
    <el-select v-model="alignItems" class="mb-4">
      <el-option label="start" value="start"></el-option>
      <el-option label="end" value="end"></el-option>
      <el-option label="center" value="center"></el-option>
      <el-option label="stretch" value="stretch"></el-option>
    </el-select>
  </div>

  <justify-align-items :justify="justifyItems" :align="alignItems"/>

  <h5 class="mb-4"><code>justify-content</code> 属性,<code>align-content</code> 属性, <code>place-content</code> 属性
  </h5>
  <ul>
    <li><code>justify-content</code>属性设置单元格内容的水平位置（左中右）</li>
    <li><code>align-content</code>属性设置单元格内容的垂直位置（上中下）</li>
  </ul>

  <div style="display: grid;grid-template-columns: repeat(2, 150px 200px);gap: 10px;">
    <p>justify-content:</p>
    <el-select v-model="justifyContent" class="mb-4">
      <el-option label="start" value="start"></el-option>
      <el-option label="end" value="end"></el-option>
      <el-option label="center" value="center"></el-option>
      <el-option label="stretch" value="stretch"></el-option>
      <el-option label="space-around" value="space-around"></el-option>
      <el-option label="space-between" value="space-between"></el-option>
      <el-option label="space-evenly" value=" space-evenly"></el-option>
    </el-select>

    <p>align-content:</p>
    <el-select v-model="alignContent" class="mb-4">
      <el-option label="start" value="start"></el-option>
      <el-option label="end" value="end"></el-option>
      <el-option label="center" value="center"></el-option>
      <el-option label="stretch" value="stretch"></el-option>
      <el-option label="space-around" value="space-around"></el-option>
      <el-option label="space-between" value="space-between"></el-option>
      <el-option label="space-evenly" value=" space-evenly"></el-option>
    </el-select>
  </div>

  <justify-align-content :justify="justifyContent" :align="alignContent"/>
  <p><code>place-content</code></p>
  <ul>
    <li> <code> start</code>对齐容器的起始边框</li>
    <li> <code> end</code> 对齐容器的结束边框</li>
    <li> <code> center</code> 对齐容器的中间位置</li>
    <li> <code> stretch</code> 填充容器剩余空间,项目大小没有指定时，拉伸占据整个网格容器。</li>
  </ul>
  <p> <code>place-content</code> 属性是 <code>align-content</code> 属性和 <code>justify-content</code> 属性的合并简写形式。</p>

  <pre v-highlight><code class="css">.container {
  place-content: &lt;align-content &gt; &lt;justify-content&gt;
}</code></pre>
  <p>如果省略第二个值，浏览器就会假定第二个值等于第一个值。</p>

  <h5 class="mb-4"><code>grid-auto-columns</code> 属性，<code>grid-auto-rows</code> 属性</h5>
  <p>有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。</p>

  <p><code>grid-auto-columns</code>属性和<code>grid-auto-rows</code>属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与<code>grid-auto-columns</code>和<code>grid-auto-rows</code>完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高</p>
  <auto-colum/>
  <pre v-highlight><code class="css">.container{
  display: grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
  grid-auto-rows: 50px;
}
.item-8 {
  grid-row-start: 4;
  grid-column-start: 2;
}
.item-9 {
  grid-row-start: 5;
  grid-column-start: 3;
}</code></pre>
  <p>上面代码指定新增的行高统一为50px（原始的行高为100px）。</p>

  <h5> <code>grid-template</code>  属性，<code> grid</code>属性</h5>
  <p><code>grid-template</code>属性是<code>grid-template-columns</code>、<code>grid-template-rows</code>和<code>grid-template-areas</code>这三个属性的合并简写形式。</p>
  <code>grid</code>属性是<code>grid-template-rows</code>、<code>grid-template-columns</code>、<code>grid-template-areas</code>、 <code>grid-auto-rows</code>、<code>grid-auto-columns</code>、<code>grid-auto-flow</code>这六个属性的合并简写形式。
  <p>从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。</p>

  <el-card header="基本使用" class="mb-4 mt-4">
    <demo/>
  </el-card>

  <el-card header="布局实例" class="mb-4">
    <p><code> grid-template-columns</code>属性对于网页布局非常有用。两栏式布局只需要一行代码。</p>
    <pre v-highlight><code>.container{
  display: grid;
  grid-template-columns: 30% 70%;
}</code></pre>
    <template-column/>
    <p>上面代码将左边栏设为70%，右边栏设为30%。</p>
  </el-card>

  <el-card header="gap属性:grid-row-gap grid-column-gap grid-gap" class="mb-4">

  </el-card>

</template>

<style scoped>

</style>